import { Component, createRef } from 'react'
import avatar from './images/avatar.png'
import dayjs from 'dayjs'
import orderBy from 'lodash/orderBy'
import './index.css'
// 状态数据
const state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'hot',
  list: [
    {
      id: 3,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: new Date('2021-10-10 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '哎哟，不错哦',
      time: new Date('2021-10-11 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 1,
      author: '五月天',
      comment: '不打扰，是我的温柔',
      time: new Date('2021-10-11 10:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
  ],

  // 文本域输入的值
  txt: '',
}
// 功能：
// 1 展示评论数量
// 2 发表评论功能
// 3 删除评论
// 4 点赞和踩
// 5 tabs 切换
// 6 tabs 切换时排序
//   按热度排序：id 升序
//   按时间排序：时间降序
//  直接在 tabs 切换的事件处理程序中，来排序即可
class App extends Component {
  state = state
  txtRef = createRef()
  // 时间过滤器
  formatTime(val) {
    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
  }
  // 文本域change获取
  txtChange = (e) => {
    // console.log(e.target.value);
    this.setState({
      txt: e.target.value,
    })
  }

  // 添加功能
  txtAdd = () => {
    const { txt, list } = this.state
    // 非空校验
    if (txt.trim() === '') return
    // console.log(1111)
    // 处理id
    const id = list.length === 0 ? 1 : list[list.length - 1].id + 1
    // 创建新状态
    const newList = [
      {
        id,
        author: '刘德华',
        comment: txt,
        time: new Date(),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      ...list,
    ]

    this.setState({
      list: newList,
      txt: '',
    })
  }

  // 删除功能
  txtDel = (id) => {
    const { list } = this.state
    const newList = list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }

  // 点赞和点鄙视
  changeAttitude = (id, attitude) => {
    // console.log(id,attitude);
    const { list } = this.state
    const newList = list.map((item) => {
      // 映射判断id是否正确
      if (item.id === id) {
        return {
          ...item,
          attitude,
        }
      }
      return item
    })
    this.setState({
      list: newList,
    })
  }

  // tab栏切换
  tabChange = (active) => {
    const { list } = this.state

    let newList

    if (active === 'hot') {
      newList = orderBy(list, ['id'], ['asc'])
    } else {
      newList = orderBy(list, ['time'], ['desc'])
    }

    this.setState({
      active,

      list: newList,
    })
  }

  render() {
    const { tabs, list, active } = this.state
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>{list.length}评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {tabs.map((item) => {
                return (
                  <li
                    key={item.id}
                    className={item.type === active ? 'on' : ''}
                    onClick={() => this.tabChange(item.type)}
                  >
                    按{item.name}排序
                  </li>
                )
              })}
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.txt}
                onChange={this.txtChange}
                ref={this.txtRef}
              />
              <button className="comment-submit" onClick={this.txtAdd}>
                发表评论
              </button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {list.map((item) => {
              return (
                <div className="list-item" key={item.id}>
                  <div className="user-face">
                    <img className="user-head" src={avatar} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{this.formatTime(item.time)}</span>
                      <span
                        className={`like ${item.attitude === 1 ? 'liked' : ''}`}
                        onClick={() =>
                          this.changeAttitude(
                            item.id,
                            item.attitude === 1 ? 0 : 1
                          )
                        }
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className={`hate ${
                          item.attitude === -1 ? 'hated' : ''
                        }`}
                        onClick={() =>
                          this.changeAttitude(
                            item.id,
                            item.attitude === -1 ? 0 : -1
                          )
                        }
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className="reply btn-hover"
                        onClick={() => this.txtDel(item.id)}
                      >
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}

export default App
